<template>
  <div>

    <el-row class="bread-nav">
      <ul class="bread-nav-title">
        <span>{{this.info.class}}({{this.info.username}})</span>
      </ul>
    </el-row>

    <div class="content">
      <div>
        <div class="myTable">
          <ul class="myTable-title">
        <span>
          快开彩
        </span>
          </ul>
          <ul class="myTable-content">
            <button v-for="item in 30" :key="item">
              {{item}}
            </button>
          </ul>
        </div>
        <div class="myTable">
          <ul class="myTable-title">
        <span>
          香港彩
        </span>
          </ul>
          <ul class="myTable-content">
            <button v-for="item in 3" :key="item">
              {{item}}
            </button>
          </ul>
        </div>
      </div>
    </div>

    <el-row class="baseOdd-content" v-if="nowGameOdd">
      <table class="top-table">
        <tbody>
        <tr>
          <td v-for="(list,index) in nowGameOdd" :key="index">
            <table class="gameOdds">
              <thead>
              <tr>
                <th>
                 种类
                </th>
                <th>
                  注额
                </th>
                <th>
                  状态
                </th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="(item,index1) in list" :key="index1" class="gameOdds-info">
                <td>
                  {{item.name}}
                </td>
                <td>
                  <input type="text" v-model="item.d_diff">
                </td>
                <td>
                  <el-checkbox v-model="item.checked" @change="changeCheckbox()"></el-checkbox>
                </td>
              </tr>
              </tbody>
            </table>
          </td>
        </tr>
        </tbody>
      </table>
    </el-row>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'notice',
  computed: {
    ...mapGetters(['info']),
  },
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.bread-nav{
  height:30px;
  font-size: 13px;
  line-height: 30px;
  background: #ECEFF2;
  border-bottom: 1px solid #d0dff2;
  padding: 0 0 0 10px;
  overflow: hidden;
}
.bread-nav-title{
  color:#386399;
  font-weight: bold;
  float: left;
  background: url("../../../../static/agent/img/tb.png") no-repeat left center;
  padding-left: 20px;
}

.myTable{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  height:auto;
  border: 1px solid #B9C2CB;
  border-bottom: 0;
}
.myTable:last-child{
  border-bottom: 1px solid #B9C2CB !important;
}
.myTable ul{
  min-width: 60px;
  text-align: center;
}
.myTable-title{
  float:left;
  box-shadow: inset 0px -14px 19px 2px #DAEFEF;
  height:30px;
  font-weight: bold;
  font-size:13px;
  line-height: 30px;
  position: absolute;
  display: block;
}
.myTable-content{
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  border-bottom: 0;
  margin-left: 60px;
}
.myTable-content button{
  border:0;
  color:#535353;
  background-color: #DCDCDC;
  height:25px;
  min-width:100px;
  padding: 0 20px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  margin-top: 5px;
  margin-right: 5px;
}
.myTable-content button:hover{
  background-color: #386BAD;
  color:#FFF;
}
.myTableSelectedBtn{
  background-color: #386BAD;
  color:#FFF;
}
  .content{
    padding: 10px;
  }
</style>
